import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  InputGroup,
  FormControl,
  Form,
  Row,
  Col
} from 'react-bootstrap';
import $ from 'jquery';
import queryString from 'query-string';

class AddDbConnector extends Component {

  state = {
    passwordFlg: true,
    selectedProject: -1,
  }

  handleSshChange (event) {
    $("#showHostBox").css("display", $(event.target).is(':checked') ? "flex" : "none");
  }

  handleProjectChange (event) {
    this.setState({
      selectedProject: parseInt($(event.target).val())
    });
  }

  componentDidMount(){
    this.initSelectedProject();
  }

  componentDidUpdate(prevProps){
    this.initSelectedProject();
  }

  initSelectedProject(){
    let pid = parseInt(queryString.parse(window.location.search).pid);
    if(this.state.selectedProject === -1){
      if(pid > 0){
        this.setState({selectedProject: pid});
      }else if(Object.keys(this.props.projectList).length > 0){
        this.setState({selectedProject: parseInt(Object.keys(this.props.projectList)[0])});
      }
    }
  }

  render () {
    return (
      <Form>
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            数据库标识：
          </Form.Label>
          <Col sm={9}>
            <Form.Control id="dbConnectName" autoComplete="off" placeholder="添加微服务时识别数据库（不可修改，最好包含所属环境参数）" />
          </Col>
        </Form.Group>
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            连接类型：
          </Form.Label>
          <Col sm={9}>
            <Form.Control
              id="connectorType"
              as="select">
              <option value="1">MYSQL</option>
            </Form.Control>
          </Col>
        </Form.Group>
        {typeof this.props.projectId === "undefined" ?
          <Form.Group as={Row}>
            <Form.Label column sm={3}>
              所属项目：
          </Form.Label>
            <Col sm={9}>
              <Form.Control id="projectId" as="select" onChange={this.handleProjectChange.bind(this)}>
                {Object.keys(this.props.projectList).map(key => {
                  let item = this.props.projectList[key];
                  return (
                    <option key={key} value={key}>{item.name}</option>
                  )
                })}
              </Form.Control>
            </Col>
          </Form.Group>
          : null}
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            地址：
          </Form.Label>
          <Col sm={4}>
            <Form.Control id="host" autoComplete="off" placeholder="必填" />
          </Col>
          <Form.Label column sm={2}>
            端口
          </Form.Label>
          <Col sm={3}>
            <Form.Control type="number" id="port" defaultValue={3306} />
          </Col>
        </Form.Group>
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            用户名：
          </Form.Label>
          <Col sm={9}>
            <Form.Control id="username" autoComplete="off" placeholder="必填" />
          </Col>
        </Form.Group>
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            密码：
          </Form.Label>
          <Col sm={9}>
            <InputGroup>
              <FormControl
                id="password"
                type={this.state.passwordFlg ? "password" : "text"}
                placeholder="必填"
                autoComplete="off"
              />
              <InputGroup.Append>
                <InputGroup.Text className="eyeIcon" onClick={() => this.setState({ passwordFlg: !this.state.passwordFlg })}>&#xe648;</InputGroup.Text>
              </InputGroup.Append>
            </InputGroup>
          </Col>
        </Form.Group>
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            ssh通道：
          </Form.Label>
          <Col sm={9}>
            <Form.Check
              type="checkbox"
              id="isUseSsh"
              label="使用"
              value="1"
              onChange={this.handleSshChange.bind(this)}
            />
          </Col>
        </Form.Group>
        <Form.Group as={Row} id="showHostBox" style={{"display":"none"}}>
          <Form.Label column sm={3}>
            服务器名：
          </Form.Label>
          <Col sm={9}>
            <Form.Control
              id="hostName"
              as="select">
              {this.props.hosts.map(
                item => item.projectId === this.state.selectedProject ? <option key={item.hostName} value={item.hostName}>{item.hostName}</option> : null
              )}
            </Form.Control>
          </Col>
        </Form.Group>
      </Form>
    )
  }
}

function mapStateToProps (state) {
  return {
    projectList: state.project,
    hosts: state.deploy.hosts,
  }
}

export default connect(mapStateToProps)(AddDbConnector);